<template>
  <div id="info_search">
    <!-- 搜行业 start -->
    <div class="container clearflx search_box" v-if="showSearch1==1">
      <div class="search">
        <form action method class="search_industry clearflx">
          <input type="submit" value="搜行业" class="search_btn" />
          <input type="text" class="search_text" />
        </form>
      </div>
      <div class="search_list" v-for="(item,index) in industry" :key="index">
        <h3 class="search_listTitle">{{item.title}}</h3>
        <span
          class="search_lists"
          v-for="(item1,index2) in item.content"
          :key="index2"
        >{{item1.name}}</span>
      </div>
    </div>
    <!-- 搜行业end -->
    <!-- 搜城市 start -->
    <div class="container clearflx search_box" v-if="showSearch==0">
      <div class="search">
        <form action method class="search_industry clearflx">
          <input type="submit" value="搜城市" class="search_btn" />
          <input type="text" class="search_text" />
        </form>
      </div>
      <div class="search_list">
        <div v-for="(item,num) in citys" :key="num" class="citys">
          <h3 class="search_listTitle1">{{item.area}}</h3>
          <span class="search_lists" v-for="(item1,num2) in item.city" :key="num2">{{item1.name}}</span>
        </div>
      </div>
    </div>
    <!-- 搜城市end -->
    <!-- 搜国家 start -->
    <div class="container clearflx search_box" v-if="showSearch==1">
      <div class="search">
        <form action method class="search_industry clearflx">
          <input type="submit" value="搜国家" class="search_btn" />
          <input type="text" class="search_text" />
        </form>
      </div>
      <div class="search_list">
        <div v-for="(item,num1) in country" :key="num1" class="citys">
          <h3 class="search_listTitle">{{item.area}}</h3>
          <span
            class="search_lists"
            v-for="(item2,num3) in item.countrys"
            :key="num3"
          >{{item2.name}}</span>
        </div>
      </div>
    </div>
    <!-- 搜国家end -->
    <div class="container clearflx search_box" v-if="showSearch==2">
      <div class="search_list search_list1" style="padding-left: 26px;">
        <div class="citys">
          <h3 class="search_listTitle2">行业：</h3>
          <span class="search_lists">招展会议</span>
          <span class="search_lists">招展会议</span>
          <span class="search_lists">招展会议</span>
          <span class="search_lists">招展会议</span>
          <span class="search_lists">招展会议</span>
          <span class="search_lists">招展会议</span>
        </div>
      </div>
      <div class="search_list" style="margin-top: 20px;margin-bottom: 6px;padding-left: 26px;">
        <div class="citys">
          <h3 class="search_listTitle2">地区：</h3>
          <span class="search_lists">全部</span>
        </div>
      </div>
      <div class="search_list" style="padding-left: 26px;">
        <div v-for="(item,num) in citys" :key="num" class="citys">
          <h3 class="search_listTitle1">{{item.area}}</h3>
          <span class="search_lists" v-for="(item1,num2) in item.city" :key="num2">{{item1.name}}</span>
        </div>
      </div>
    </div>
    <div
      class="container clearflx search_boxBottom"
      style="overflow:hidden;padding-bottom: 10px;"
      v-if="showSearch1==1"
    >
      <ol class="clearflx times">
        <li
          v-for="(time,number) in time"
          :key="number"
          :class="{timeslistActive:time_tab==number}"
          class="timeslist"
          @click="time_tab=number"
        >{{time.num}}</li>
      </ol>
    </div>

  </div>
</template>
<script>
export default {
  props: {
    showType: String,
    showType1: String,
  },
  data() {
    return {
      time_tab: 0,
      showSearch: 0,
      showSearch1: 0,
      industry: [
        {
          title: "工业品：",
          content: [
            { name: "机械工业" },
            { name: "电子电力" },
            { name: "光电技术" },
            { name: "交通工具" },
            { name: "汽摩配件" },
            { name: "仪器仪表" },
            { name: "暖通制冷" },
            { name: "物流运输" }
          ]
        },
        {
          title: "原材料：",
          content: [
            { name: "建材五金" },
            { name: "能源矿产" },
            { name: "环保产业" },
            { name: "钢铁治金" },
            { name: "纺织纺机" },
            { name: "印刷包装" },
            { name: "化工橡塑" }
          ]
        },
        {
          title: "消费品：",
          content: [
            { name: "食品汉料" },
            { name: "服装配饰" },
            { name: "皮革鞋业" },
            { name: "礼品玩具" },
            { name: "音咽乐器" },
            { name: "房产家居" },
            { name: "消费电子" },
            { name: "医疗保键" },
            { name: "体育体闲" },
            { name: "信息通信" },
            { name: "著移品牌" },
            { name: "纸业纸品" },
            { name: "美容美发" },
            { name: "办公用品" }
          ]
        },
        {
          title: "综 合：",
          content: [
            { name: "酒店用品" },
            { name: "广告媒体" },
            { name: "安全防护" },
            { name: "文化教育" },
            { name: "文学艺术" },
            { name: "农林牧业" },
            { name: "旅游行业" },
            { name: "贸易进口" },
            { name: "创业加盟" },
            { name: "婚庆婚博" },
            { name: "孕婴童" },
            { name: "购物年货" },
            { name: "动漫游戏" }
          ]
        }
      ],
      citys: [
        {
          area: "华东：",
          city: [
            { name: "山东" },
            { name: "江苏" },
            { name: "安徽" },
            { name: "浙江" },
            { name: "福建" },
            { name: "上海" }
          ]
        },
        {
          area: "华南：",
          city: [{ name: "广东" }, { name: "广西" }, { name: "海南" }]
        },
        {
          area: "华中：",
          city: [
            { name: "湖北" },
            { name: "湖南" },
            { name: "河南" },
            { name: "江西" }
          ]
        },
        {
          area: "华北：",
          city: [
            { name: "北京" },
            { name: "天津" },
            { name: "河北" },
            { name: "山西" },
            { name: "内蒙古" }
          ]
        },
        {
          area: "西北：",
          city: [
            { name: "宁夏" },
            { name: "新疆" },
            { name: "青海" },
            { name: "陕西" },
            { name: "甘肃" }
          ]
        },
        {
          area: "西南：",
          city: [
            { name: "四川" },
            { name: "新疆" },
            { name: "贵州" },
            { name: "西藏" },
            { name: "重庆" }
          ]
        },
        {
          area: "东北：",
          city: [{ name: "辽宁" }, { name: "吉林" }, { name: "黑龙江" }]
        },
        {
          area: "港澳台：",
          city: [{ name: "台湾" }, { name: "香港" }, { name: "澳门" }]
        }
      ],
      country: [
        {
          area: "亚洲：",
          countrys: [
            { name: "土耳其" },
            { name: "孟加拉国" },
            { name: "伊朗" },
            { name: "越南" },
            { name: "印度尼西亚" },
            { name: "印度" },
            { name: "哈萨克斯坦" },
            { name: "日本" },
            { name: "沙特阿拉伯" },
            { name: "马来西亚" },
            { name: "卡塔尔" },
            { name: "阿拉伯联合酋长国" },
            { name: "巴基斯坦" },
            { name: "泰国" },
            { name: "韩国" }
          ]
        },
        {
          area: "非洲：",
          countrys: [
            { name: "摩洛哥" },
            { name: "埃及" },
            { name: "肯尼亚" },
            { name: "埃塞尔比亚" },
            { name: "赞比亚" },
            { name: "南非" },
            { name: "尼日利亚" }
          ]
        },
        {
          area: "欧洲：",
          countrys: [
            { name: "意大利" },
            { name: "法国" },
            { name: "德国" },
            { name: "芬兰" },
            { name: "希腊" },
            { name: "波兰" },
            { name: "匈牙利" },
            { name: "俄罗斯" }
          ]
        },
        {
          area: "南美洲：",
          countrys: [{ name: "秘鲁" }, { name: "巴西" }, { name: "智利" }]
        },
        {
          area: "北美洲：",
          countrys: [{ name: "美国" }, { name: "墨西哥" }, { name: "加拿大" }]
        },
        {
          area: "中美洲：",
          countrys: [{ name: "澳大利亚" }]
        }
      ],
      time: [
        { num: "更早" },
        { num: "1月" },
        { num: "2月" },
        { num: "3月" },
        { num: "4月" },
        { num: "5月" },
        { num: "6月" },
        { num: "7月" },
        { num: "8月" },
        { num: "9月" },
        { num: "10月" },
        { num: "11月" },
        { num: "12月" },
        { num: "2020" }
      ],
      
      
    };
  },
  created() {
    this.showSearch = this.showType;
    this.showSearch1 = this.showType1;
  }
};
</script>
<style lang="scss" scoped>
#info_search {
  background-color: #f0eef0;
  padding-top: 60px;
  position: relative;
  .search_box {
    padding-bottom: 20px;
    .search {
      padding-left: 70px;
      margin-bottom: 20px;
      .search_industry {
        display: block;
        .search_text {
          width: 176px;
          height: 10px;
          line-height: 10px;
          font-size: 12px;
          padding: 10px;
          border: 1px solid #c81622;
          float: left;
          background-image: url(../../assets/info/info_search_bg.png);
          background-repeat: no-repeat;
          background-size: 80%;
          background-position: right;
        }
        .search_btn {
          float: left;
          width: 60px;
          height: 32px;
          line-height: 32px;
          font-size: 16px;
          color: #fff;
          background-color: #c81622;
          border: none;
        }
      }
    }
    .search_list {
      padding-left: 80px;
      text-align: left;
      line-height: 24px;
      .search_listTitle {
        display: inline-block;
        color: #000;
        font-weight: 500;
        text-align: justify;
        text-align-last: justify;
        width: 78px;
      }
      .citys {
        display: inline-block;
        margin-right: 10px;
        .search_listTitle1 {
          display: inline-block;
          color: #000;
          font-weight: 500;
          text-align: justify;
          text-align-last: justify;
          // width: 60px;
        }
        .search_listTitle2{
          display: inline-block;
          color: #000;
          font-weight: 500;
          text-align: justify;
          text-align-last: justify;
          // width: 60px;
        }

        .search_lists {
          display: inline-block;
          font-size: 14px;
          color: #9f9f9f;
          margin-right: 12px;
          cursor: pointer;
        }
      }
      // .citys:last-of-type {
      //   .search_listTitle1 {
      //     width: 76px;
      //   }
      // }

      .search_lists {
        display: inline-block;
        font-size: 14px;
        color: #9f9f9f;
        margin-right: 12px;
        cursor: pointer;
      }
    }
  }
  .search_boxBottom::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -48px;
    left: 80px;
    z-index: 10;
    width: 120px;
    height: 48px;
    background-image: url(../../assets/info/triangle_while.png);
    background-repeat: no-repeat;
    background-size: 100%;
  }
  .times {
    float: right;
    font-size: 14px;
    line-height: 27px;
    .timeslist {
      float: left;
      margin-right: 10px;
      color: #9f9f9f;
      cursor: pointer;
    }
    .timeslistActive {
      color: #000;
    }
  }
 
}
</style>